<template>
  <div>
    <open-modal class="c-pz10000" :openModal="showCombo" @closeModal="closeCombo" v-if="isShowModal">
      <div class="c-bg-white c-pt26 c-pb32 c-ph24 c-br-tr16 c-br-tl16 c-minh50vh c-maxh80vh c-flex-column">
        <template v-if="showTop">
          <div class="c-flex-shrink0 c-flex-row c-aligni-center">
            <div class="c-flex-grow1 c-pl20 c-textAlign-c c-fs28 c-fw600 c-fc-xblack">购买课程</div>
            <span class="c-flex-shrink0 iconfont c-fs20 c-fc-gray" @click="closeCombo">&#xeca0;</span>
          </div>
          <div class="c-flex-shrink0 c-fs22 c-fc-gray c-mt30 c-mb20">该内容属于多个关联课程里,不能单独购买,请从以下相关课程进行选购购买</div>
        </template>
        <div class="c-flex-c-flex-grow1 c-contexty-scroll">
          <template v-if="packageList.length > 0 && (showType == 0 || showType ==2)">
            <div class="c-fs24 c-fc-xblack c-mv16">相关知识套餐</div>
            <div>
              <div class="c-flex-row c-pt20" @click="clickPackageItem(item.cId)" v-for="(item,index) in packageList" :key="index">
                <div class="c-ww210 c-hh140 c-text-hidden c-p">
                  <CoverImg  :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" :imgClass="'c-br16'" :coverUrl="$addXossFilter(item.cover, require('../../assets/defult270.png'))" :prodType="cfrom.package" />
                  <img v-if="item.payType == 2 && item.svipDiscount==0 && item.vipDiscount!=0" src="@/assets/i/wap/course/svipfree5.png" alt="" class="c-pa c-p-t0 c-p-l0 c-ww60 c-pz1" />
                  <img v-else-if="item.payType == 2 && item.vipDiscount==0" src="@/assets/i/wap/course/vipfree5.png" alt="" class="c-pa c-p-t0 c-p-l0 c-ww60 c-pz1" />
                </div>
                <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb c-pb20" :class="index == packageList.length - 1 ? '': 'c-bd-b1'">
                  <div class="c-fs24 c-text-ellipsis2 c-hh100">{{item.name}}</div>
                  <div class="c-flex-row c-aligni-center c-justify-sb">
                    <div v-if="item.isSaleOnly == 0 && item.isSaleTogether" class="c-fc-xmlred c-fs22 c-fw600">关联售卖</div>
                    <div v-else-if="item.payType == 3" class="c-fc-xmlred c-fs22 c-fw600">加密</div>
                    <div v-else-if="Number(item.relateProdPrice) == 0" class="c-fc-xmlred c-fs22 c-fw600">免费</div>
                    <div v-else class="c-fc-xmlred c-fs22 c-fw600">
                      <span>{{ '￥' | iosPriceFilter(item.optimal) }}</span
                      >{{ item.payType | priceValueFilter(item.relateProdPrice, item.prodType, item.optimal) }}
                    </div>
                    <div class="c-fs20 c-fc-gray" v-if="item.price && item.payType == 2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.package)))">{{item.sales | formatNumber}}人已{{$isWxAppIos() ? '观看' : '购买'}}</div>
                    <div class="c-fs20 c-fc-gray" v-else-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.package))">{{(item.visits ? item.visits : item.clicks) | formatNumber}}人观看</div>
                  </div>
                </div>
              </div>
              <div class="c-pv20 c-textAlign-c c-fc-gray c-fs24" @click="getMore(1)" v-if="packageMore">
                加载更多&nbsp;>
              </div>
            </div>
          </template>
          <template v-if="columnList.length > 0 && (showType == 0 || showType ==1)">
            <div class="c-fs24 c-fc-xblack c-mv16">相关专栏</div>
            <div>
              <div class="c-flex-row c-mt20" @click="clickColumnItem(item.columnId)" v-for="(item,index) in columnList" :key="index">
                <div class="c-ww210 c-hh140 c-text-hidden c-p">
                  <CoverImg  :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" :imgClass="'c-br16'" :coverUrl="$addXossFilter(item.cover, require('../../assets/defult270.png'))" :prodType="cfrom.column" />
                </div>
                <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb c-pb20" :class="index == columnList.length - 1 ? '': 'c-bd-b1'">
                  <div class="c-fs24 c-text-ellipsis2 c-hh100">{{item.name}}</div>
                  <div class="c-flex-row c-aligni-center c-justify-sb">
                    <span v-if="item.isSaleOnly == 0 && item.isSaleTogether == 1" class="theme-fc c-fs24"> 关联售卖</span>
                    <template v-else>
                      <div v-if="item.payType == 3" class="c-fc-xmlred c-fs22 c-fw600">加密</div>
                      <div v-else-if="Number(item.relateProdPrice) == 0" class="c-fc-xmlred c-fs22 c-fw600">免费</div>
                      <div v-else class="c-fc-xmlred c-fs22 c-fw600">
                        <span>{{ '￥' | iosPriceFilter(item.optimal) }}</span
                        >{{ item.payType | priceValueFilter(item.relateProdPrice, item.prodType, item.optimal) }}
                      </div>
                    </template>
                    <div class="c-fs20 c-fc-gray" v-if="item.price && item.payType == 2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.column)))">{{item.sales | formatNumber}}人已{{$isWxAppIos() ? '观看' : '购买'}}</div>
                    <div class="c-fs20 c-fc-gray" v-else-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.column))">{{(item.visits ? item.visits : item.clicks) | formatNumber}}人观看</div>
                  </div>
                </div>
              </div>
              <div class="c-pv20 c-textAlign-c c-fc-gray c-fs24" @click="getMore(2)" v-if="columnMore">
                加载更多&nbsp;>
              </div>
            </div>
          </template>
          <template v-if="training.length > 0 && (showType == 0 || showType == 3)">
            <div class="c-fs24 c-fc-xblack c-mv16">相关训练营</div>
            <div>
              <div class="c-flex-row c-mt20" v-for="(item, index) in training" :key="index" @click="clickTrainingItem(item.ttId)">
                <div class="c-ww210 c-hh140 c-text-hidden c-p">
                  <CoverImg  :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" :imgClass="'c-br16'" :coverUrl="$addXossFilter(item.cover, require('../../assets/defult270.png'))" :prodType="cfrom.camp" />
                </div>
                <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb c-pb20" :class="index == training.length - 1 ? '':'c-bd-b1'">
                  <div class="c-fs24 c-text-ellipsis2 c-hh100">{{item.name}}</div>
                  <div class="c-flex-row c-aligni-center c-justify-sb">
                    <span v-if="item.isSaleOnly == 0 && item.isSaleTogether == 1" class="theme-fc c-fs24"> 关联售卖</span>
                    <template v-else>
                      <div v-if="item.payType == 3" class="c-fc-xmlred c-fs22 c-fw600">加密</div>
                      <div v-else-if="Number(item.relateProdPrice) == 0" class="c-fc-xmlred c-fs22 c-fw600">免费</div>
                      <div v-else class="c-fc-xmlred c-fs22 c-fw600">
                        <span>{{ '￥' | iosPriceFilter(item.optimal) }}</span
                        >{{ item.payType | priceValueFilter(item.relateProdPrice, item.prodType, item.optimal) }}
                      </div>
                    </template>
                    <div v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.camp))" class="c-fs20 c-fc-gray">{{item.people}}人已报名</div>
                  </div>
                </div>
              </div>
              <div class="c-pv20 c-textAlign-c c-fc-gray c-fs24" @click="getMore(3)" v-if="trainingMore">
                加载更多&nbsp;>
              </div>
            </div>
          </template>
          <template v-if="circleList.length > 0 && showType == 0">
            <div class="c-fs24 c-fc-xblack c-mv16">相关圈子</div>
            <div>
              <div class="c-flex-row c-mt20" v-for="(item, index) in circleList" :key="index" @click="clickJumpCircle(item.id)">
                <div class="c-ww210 c-hh140 c-text-hidden c-p">
                  <img class="c-w100 imgCloseBig c-br8 c-h c-object-fit-cover" :src="$addXossFilter(item.avatar, require('../../assets/defult270.png'))" alt="">
                </div>
                <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb c-pb20" :class="index == circleList.length - 1 ? '':'c-bd-b1'">
                  <div class="c-fs24 c-text-ellipsis2 c-hh100">{{item.name}}</div>
                  <div class="c-flex-row c-aligni-center c-justify-sb">
                    <span v-if="item.isSaleOnly == 0 && item.isSaleTogether == 1" class="theme-fc c-fs24"> 关联售卖</span>
                    <template v-else>
                      <div class="theme-fc c-fs24">
                        <span v-if="item.price && item.payType == 2" class="c-fs18">{{'￥' | iosPriceFilter(item.optimal)}}</span>
                        {{item.payType | priceValueFilter(item.price, 9, item.optimal)}}
                      </div>
                    </template>
                    <div class="c-fs20 c-fc-gray">{{item.memberCount}}人加入</div>
                  </div>
                </div>
              </div>
              <div class="c-pv20 c-textAlign-c c-fc-gray c-fs24" @click="getMore(3)" v-if="trainingMore">
                加载更多&nbsp;>
              </div>
            </div>
          </template>
          <loading-status-tem :noData="packageList.length == 0 && columnList.length == 0 && training.length == 0 && circleList.length == 0" :noDataText="'暂无关联产品'"></loading-status-tem>
        </div>
      </div>
    </open-modal>
    <template v-if="!isShowModal && columnList.length > 0 && showType ==1">
      <div class="c-flex-row c-justify-sb">
        <div class="c-fc-xblack c-fs26 c-fw-b">所属课程</div>
        <span class="c-fs20 c-fc-gray" @click="backPackage">查看全部</span>
      </div>
      <div>
        <div class="c-flex-row c-mt20" @click="clickColumnItem(item.columnId)" v-for="(item,index) in columnList" :key="index" v-if="index == 0">
          <div class="c-ww210 c-hh140 c-text-hidden c-p">
            <img class="c-w100 imgCloseBig c-br8" :src="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
          </div>
          <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb c-pb20" :class="index == columnList.length - 1 ? '': 'c-bd-b1'">
            <div class="c-fs24 c-text-ellipsis2 c-hh100">{{item.name}}</div>
            <div class="c-flex-row c-aligni-center c-justify-sb">
              <span v-if="item.isSaleOnly == 0 && item.isSaleTogether == 1" class="theme-fc c-fs24"> 关联售卖</span>
              <template v-else>
                <div class="theme-fc c-fs24">
                  <span v-if="item.price && item.payType == 2" class="c-fs18">{{'￥' | iosPriceFilter(item.optimal)}}</span>
                  {{item.payType | priceValueFilter(item.price, 9, item.optimal)}}
                </div>
              </template>
              <div class="c-fs20 c-fc-gray" v-if="item.price && item.payType == 2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.course)))">{{item.sales | formatNumber}}人已{{$isWxAppIos() ? '观看' : '购买'}}</div>
              <div class="c-fs20 c-fc-gray" v-else-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.package))">{{(item.visits ? item.visits : item.clicks) | formatNumber}}人观看</div>
            </div>
          </div>
        </div>
        <!-- 目前仅展示第一个数据，就不用分页处理了 -->
        <!-- <div class="c-pv20 c-textAlign-c c-fc-gray c-fs24" @click="getMore(2)" v-if="columnMore">
          加载更多&nbsp;>
        </div> -->
      </div>
    </template>
  </div>
</template>
<script>
import OpenModal from "@/components/templates/common/openModal.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import CoverImg from '@/components/templates/common/coverImg.vue';
import { utilJs } from "@/utils/common.js"
export default {
  name: "RelatedCombo",
  components: {
    OpenModal,
    loadingStatusTem,
    CoverImg
  },
  props: {
    distributionId: {
      type: String,
      default: ''
    },
    showCombo: {
      type: Boolean,
      default: false
    },
    isBuy: {
      type: Number,
      default: 0
    },
    needPwd: {
      type: Number,
      default: 0
    },
    packageList: {
      type: Array,
      default: () => []
    },
    columnList: {
      type: Array,
      default: () => []
    },
    training: {
      type: Array,
      default: () => []
    },
    circleList:{
      type: Array,
      default: () => []
    },
    packageMore: {
      type: Boolean,
      default: false
    },
    columnMore: {
      type: Boolean,
      default: false
    },
    trainingMore: {
      type: Boolean,
      default: false
    },
    showTop: {
      type: Boolean,
      default: true
    },
    isShowModal: {
      type: Boolean,
      default: true
    },
    showType: {
      type: Number,
      default: 0 //0：都展示 1：展示专栏 2：展示知识套餐, 3:训练营
    }
  },
  data() {
    return {
      cfrom: global.ckFrom,
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
    };
  },
  methods: {
    closeCombo() {
      this.$emit('closeCombo')
    },
    getMore(type) {
      this.$emit('getMore', type)
    },
    clickPackageItem(packageId) {
      let distribution = this.distributionId ? `&distribution=1` : '';
      let toPath = `/homePage/package/packageDetail?combosId=${packageId}${distribution}`;
      this.iosAppRouteChange(toPath);
    },
    clickColumnItem(columnId) {
      let distribution = this.distributionId ? `&distribution=1` : '';
      let toPath = `/homePage/column/columnDetail?cId=-1&ckFrom=${global.ckFrom.column}&extId=${columnId}${distribution}`;
      this.iosAppRouteChange(toPath);
    },
    clickTrainingItem(ttId) {
      let toPath = `/homePage/camp/campDetail?campId=${ttId}`;
      this.iosAppRouteChange(toPath);
    },
    clickJumpCircle(id) {
      let toPath = `/homePage/circle/circleFeed?id=${id}`;
      this.iosAppRouteChange(toPath);
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    backPackage() {
      this.$emit('backPackage')
    }
  },
  activated() {
  }
};
</script>

<style scoped>
</style>
